<template>
  <div id="vform">
    <v-form-designer ref="vfDesigner" :field-list-api="fieldListApi" :banned-widgets="testBanned"
                   :designer-config="designerConfig">
      <!-- 自定义按钮插槽演示 -->
      <template #customToolButtons>
        <el-button type="text" @click="saveFormJson"><i class="el-icon-finished" />保存</el-button>
      </template>
    </v-form-designer>

  </div>
</template>

<script>
import { getFormVersion, addFormVersion, updateFormVersion } from "@/api/flowable/formVersion";
export default {
  name: 'vform',
  data() {
    return {
      formId: this.$route.query.formId,
      versionId : this.$route.query.versionId,
      fieldListApi: null,
      testBanned: [],
      designerConfig: {
        languageMenu: true,
        externalLink: false,
        //formTemplates: false,
        //eventCollapse: false,
        //clearDesignerButton: false,
        //previewFormButton: false,
        widgetNameReadonly: true,
        generateSFCButton: false,
        logoHeader: false,
        importJsonButton: false,
        exportCodeButton: false,
        //presetCssCode: '.abc { font-size: 16px; }',
      },
      fieldWidgets: null,
    }
  },
  created(){
    this.getFormVersion();
  },
  mounted() {
  },
  methods: {

    goBack() {
      // 关闭当前标签页并返回上个页面
      this.$store.dispatch("tagsView/delView", this.$route);
      this.$router.go(-1)
    },
    getFormVersion(){
      if(this.versionId){
        getFormVersion(this.versionId).then(res => {
          this.$refs.vfDesigner.clearDesigner();
          this.$refs.vfDesigner.setFormJson(res.data.formContent);
          this.$nextTick(() => {
            this.fieldWidgets = this.$refs.vfDesigner.getFieldWidgets()
            // console.log(this.fieldWidgets)
            // console.log(this.$refs.vfDesigner.getContainerWidgets())
          });
        })
      }
    },
    saveFormJson() {
      this.$modal.confirm('确认保存？ 提示：如果有增删字段类型将生成新版本').then(res => {

      let formFields = [];//保存所有字段，包含类型，名称，用于生成落地表
      let subFormFields = [];  //保存子表极其字段，用于生成落地表
      let formContainers = [];  //需要控制权限的容器，暂时先子表
      this.$refs.vfDesigner.getContainerWidgets().forEach(item=>{
        if(item.type == 'sub-form'){
          item.container.widgetList.forEach(ele =>{
            let field = {name:ele.id, type:ele.type, label:ele.options.label, subForm: item.name};
            subFormFields.push(field)
          })
          formContainers.push({name:item.name, label:'子表' + item.name});
        } else if (item.type == 'grid-sub-form') {
          item.container.widgetList.forEach(col =>{
            col.cols.forEach(wids => {
              wids.widgetList.forEach(ele=>{
                let field = {name:ele.id, type:ele.type, label:ele.options.label, subForm: item.name};
                subFormFields.push(field)
              })
            })
          })
          formContainers.push({name:item.name, label:'多行子表' + item.name});
        }
      })
      // console.log(subFormFields);
      let isEqual = false;
      let arrayAfter = [];
      this.$refs.vfDesigner.getFieldWidgets().forEach((item) => {
        arrayAfter.push(item.name);
        let field = {name:item.name, type:item.type, label:item.field.options.label};
        if(item.field.options.optionItems){
          field.optionItems = item.field.options.optionItems;
        }
        formFields.push(field);
      });
        // console.log(formFields);
      if (this.$route.query.versionId) {
        let arrayBefore = [];

        this.fieldWidgets.forEach(item => {
          arrayBefore.push(item.name);
        });

        if (arrayBefore.sort().toString() === arrayAfter.sort().toString()) {
          isEqual = true;
        }
        // console.log(arrayBefore,arrayAfter); return;
      }
      let formJson = JSON.stringify(this.$refs.vfDesigner.getFormJson())
      let formField = JSON.stringify(formFields)
      let subFormField = JSON.stringify(subFormFields)
      let formContainer = JSON.stringify(formContainers)
      if(this.versionId && isEqual){
        updateFormVersion({versionId:this.versionId, formId:this.formId, formContent:formJson, formField:formField, subFormField:subFormField, formContainer: formContainer}).then(res => {
          this.$modal.msgSuccess("修改成功");
          // this.goBack();
        });
      } else {
        addFormVersion({formId:this.formId, formContent:formJson, formField:formField, subFormField:subFormField, formContainer: formContainer}).then(res => {
          this.$modal.msgSuccess("添加成功");
          this.goBack();
        });
      }
    })
    }
  }
}
</script>

<style lang="scss" scoped>
  #vform {
    height: 100%;
    .el-container{
      margin-left: 0px;
      width:87vw
    }
  }
</style>
